<!--
 * @Author: Craft
 * @Date: 2024-08-18
 * @Description: 暗黑破坏神2重置版资料小程序首页
-->
<template>
  <view class="d2r-container">
    <!-- 顶部横幅 -->
    <swiper class="d2r-banner" autoplay circular indicator-dots>
      <swiper-item v-for="(news, index) in hotNews" :key="index">
        <image class="banner-image" :src="news.image" mode="aspectFill"></image>
        <view class="banner-title">
          <text class="d2r-title">{{ news.title }}</text>
          <text class="banner-subtitle">{{ news.subtitle }}</text>
        </view>
      </swiper-item>
    </swiper>

    <!-- 核心功能导航 -->
    <view class="core-nav">
      <view class="nav-item" @click="navigateTo('/pages-sub/builds/build-detail')">
        <view class="nav-icon-container">
          <image class="nav-icon" src="/static/build-active.png" mode="aspectFit"></image>
        </view>
        <text class="nav-text">流派构建</text>
      </view>
      <view class="nav-item" @click="navigateTo('/pages-sub/runes/recipes')">
        <view class="nav-icon-container">
          <image class="nav-icon" src="/static/rune-active.png" mode="aspectFit"></image>
        </view>
        <text class="nav-text">符文系统</text>
      </view>
      <view class="nav-item" @click="navigateTo('/pages-sub/guides/list')">
        <view class="nav-icon-container">
          <image class="nav-icon" src="/static/whatwedo-active.png" mode="aspectFit"></image>
        </view>
        <text class="nav-text">开荒攻略</text>
      </view>
    </view>

    <!-- 职业展示 -->
    <view class="section-title">
      <text class="d2r-title">选择你的职业</text>
    </view>
    <scroll-view class="class-scroll" scroll-x="true" show-scrollbar="false">
      <view class="class-list">
        <view class="class-item" v-for="classItem in classes" :key="classItem._id" @click="showClassDetail(classItem)">
          <image class="class-image" :src="classItem.image" mode="aspectFill"></image>
          <text class="class-name">{{ classItem.name }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 热门装备 -->
    <view class="section-title">
      <text class="d2r-title">热门装备</text>
      <text class="section-more" @click="navigateTo('/pages/database/items')">查看更多</text>
    </view>
    <view class="item-grid">
      <view class="item-card" v-for="item in hotItems" :key="item._id" @click="navigateToItemDetail(item._id)">
        <view class="item-image-container" :class="'quality-border ' + getQualityClass(item.quality)">
          <image class="item-image" :src="item.image || '/static/items/default.png'" mode="aspectFit"></image>
        </view>
        <text class="item-name" :class="getQualityTextClass(item.quality)">{{ item.name }}</text>
        <text class="item-type">{{ item.type }}</text>
      </view>
    </view>

    <!-- 最新BD -->
    <view class="section-title">
      <text class="d2r-title">最新BD分享</text>
      <text class="section-more" @click="navigateTo('/pages/builds/list')">查看更多</text>
    </view>
    <view class="build-list">
      <view class="build-card" v-for="build in latestBuilds" :key="build._id" @click="navigateToBuildDetail(build._id)">
        <view class="build-header">
          <text class="build-title">{{ build.title }}</text>
          <view class="class-tag" :class="getClassTagClass(build.class)">{{ build.class }}</view>
        </view>
        <view class="build-info">
          <text class="build-author">作者: {{ build.author }}</text>
          <text class="build-date">{{ formatDate(build.createDate) }}</text>
        </view>
        <view class="build-stats">
          <view class="stat-item">
            <u-icon name="eye" size="14" color="#a0a0a0"></u-icon>
            <text class="stat-text">{{ build.viewCount }}</text>
          </view>
          <view class="stat-item">
            <u-icon name="star" size="14" color="#a0a0a0"></u-icon>
            <text class="stat-text">{{ build.favCount }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">塔拉夏之书 v1.0.0</text>
      <text class="footer-text">数据更新时间: {{ lastUpdateTime }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { loadData } from '../../common/d2r-data/index'


const hotNews = ref([
  {
    title: '暗黑破坏神2重置版新赛季开启',
    subtitle: '全新符文之语和装备掉落',
    image: '/static/images/news1.jpg'
  },
  {
    title: '塔拉夏套装全面解析',
    subtitle: '法师最强套装搭配指南',
    image: '/static/images/news2.jpg'
  },
  {
    title: '天梯排行榜更新',
    subtitle: '全球玩家巅峰等级一览',
    image: '/static/images/news3.jpg'
  }
])
// 数据
const classes = ref([])
const hotItems = ref([])
const latestBuilds = ref([])
const lastUpdateTime = ref('2024-08-18')

// 生命周期
onMounted(async () => {
  await Promise.all([
    loadClassData(),
    loadHotItems(),
    loadLatestBuilds()
  ])
})

// 加载职业数据
async function loadClassData() {
  try {
    classes.value = await loadData('classes')
    console.log(classes.value)
  } catch (error) {
    console.error('加载职业数据失败', error)
    uni.showToast({
      title: '加载职业数据失败',
      icon: 'none'
    })
  }
}

// 加载热门装备
async function loadHotItems() {
  try {
    hotItems.value = await loadData('items', {}, {
      sort: { favCount: 'desc' },
      limit: 4
    })
  } catch (error) {
    console.error('加载热门装备失败', error)
    uni.showToast({
      title: '加载热门装备失败',
      icon: 'none'
    })
  }
}

// 加载最新BD
async function loadLatestBuilds() {
  try {
    latestBuilds.value = await loadData('builds', {}, {
      sort: { createDate: 'desc' },
      limit: 3
    })
  } catch (error) {
    console.error('加载最新BD失败', error)
    uni.showToast({
      title: '加载最新BD失败',
      icon: 'none'
    })
  }
}

// 页面导航
function navigateTo(url) {
  uni.navigateTo({
    url
  })
}

// 跳转到装备详情
function navigateToItemDetail(itemId) {
  uni.navigateTo({
    url: `/pages-sub/database/item-detail?id=${itemId}`
  })
}

// 跳转到BD详情
function navigateToBuildDetail(buildId) {
  uni.navigateTo({
    url: `/pages-sub/builds/build-detail?id=${buildId}`
  })
}

// 显示职业详情
function showClassDetail(classItem) {
  uni.showModal({
    title: classItem.name,
    content: classItem.description,
    showCancel: false,
    confirmText: '关闭'
  })
}

// 显示功能即将上线提示
function showFeatureComingSoon() {
  uni.showToast({
    title: '功能即将上线',
    icon: 'none'
  })
}

// 格式化日期
function formatDate(dateStr) {
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 获取品质样式类
function getQualityClass(quality) {
  switch (quality?.toLowerCase()) {
    case '普通': return 'normal'
    case '魔法': return 'magic'
    case '稀有': return 'rare'
    case '套装': return 'set'
    case '暗金': return 'unique'
    case '工艺': return 'crafted'
    default: return ''
  }
}

// 获取品质文本样式类
function getQualityTextClass(quality) {
  switch (quality?.toLowerCase()) {
    case '普通': return 'text-normal'
    case '魔法': return 'text-magic'
    case '稀有': return 'text-rare'
    case '套装': return 'text-set'
    case '暗金': return 'text-unique'
    case '工艺': return 'text-crafted'
    default: return ''
  }
}

// 获取职业标签样式类
function getClassTagClass(className) {
  switch (className) {
    case '亚马逊': return 'amazon'
    case '野蛮人': return 'barbarian'
    case '死灵法师': return 'necromancer'
    case '圣骑士': return 'paladin'
    case '法师': return 'sorceress'
    case '德鲁伊': return 'druid'
    case '刺客': return 'assassin'
    default: return ''
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/d2r-theme.scss';

.d2r-banner {
  height: 300px;
  position: relative;
  overflow: hidden;

  .banner-image {
    width: 100%;
    height: 100%;
  }

  .banner-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: $d2r-text;
    text-shadow: 1px 1px 2px $d2r-bg-dark;
  }

  .d2r-title {
    font-size: 24px;
    font-weight: bold;
  }

  .banner-subtitle {
    font-size: 16px;
    margin-top: 8px;
  }
}

.d2r-container {
  min-height: 100vh;
  padding-bottom: 30px;
  // background: url('/static/images/parchment-bg.jpg') center/cover no-repeat;
  background-attachment: fixed;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.85);
    z-index: -1;
  }
}

// 顶部横幅
.d2r-banner {
  position: relative;
  height: 200px;
  overflow: hidden;

  .banner-image {
    width: 100%;
    height: 100%;
  }

  .banner-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;

    .d2r-title {
      font-size: 28px;
      margin-bottom: 5px;
    }

    .banner-subtitle {
      font-size: 14px;
      color: $d2r-text;
    }
  }
}

// 核心功能导航
.core-nav {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  margin: 15px;
  background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
  border-radius: 8px;
  border: 1px solid $d2r-gold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
              inset 0 0 8px rgba(212, 175, 55, 0.3);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, $d2r-gold, transparent);
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;

    &:hover {
      transform: translateY(-3px);
      
      .nav-icon-container {
        background: radial-gradient(circle, $d2r-gold 0%, darken($d2r-gold, 20%) 100%);
        box-shadow: 0 0 15px $d2r-gold;
      }
    }

    .nav-icon-container {
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: radial-gradient(circle, $d2r-bg-dark 0%, $d2r-bg-darker 100%);
      border-radius: 50%;
      margin-bottom: 8px;
      border: 2px solid $d2r-gold;
      transition: all 0.3s ease;
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.8));
    }

    .nav-text {
      font-size: 16px;
      color: $d2r-gold;
      font-weight: bold;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
      letter-spacing: 1px;
    }
  }
}

// 章节标题
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  margin: 20px 15px 10px;
  // background: url('/static/images/scroll-title-bg.png') center/cover no-repeat;
  height: 50px;
  position: relative;
  border-left: 3px solid $d2r-gold;
  border-right: 3px solid $d2r-gold;

  &::before, &::after {
    content: '';
    position: absolute;
    height: 3px;
    background: $d2r-gold;
    width: 30%;
    top: 50%;
    transform: translateY(-50%);
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }

  .d2r-title {
    font-size: 20px;
    color: $d2r-gold;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1;
  }

  .section-more {
    font-size: 14px;
    color: $d2r-gold;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;

    &:hover {
      color: lighten($d2r-gold, 15%);
      text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
    }
  }
}

// 职业展示
.class-scroll {
  width: 100%;
  white-space: nowrap;

  .class-list {
    display: inline-flex;
    padding: 0 15px;

    .class-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 15px;
      width: 80px;

      .class-image {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        border: 2px solid $d2r-gold;
        margin-bottom: 8px;
      }

      .class-name {
        font-size: 14px;
        color: $d2r-text;
      }
    }
  }
}

// 装备网格
.item-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;

  .item-card {
    width: 25%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .item-image-container {
      width: 60px;
      height: 60px;
      padding: 3px;
      background-color: $d2r-bg-darker;
      border-radius: 4px;
      margin-bottom: 5px;

      .item-image {
        width: 100%;
        height: 100%;
      }
    }

    .item-name {
      font-size: 12px;
      text-align: center;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }

    .item-type {
      font-size: 10px;
      color: $d2r-text-muted;
    }
  }
}

// BD列表
.build-list {
  padding: 0 15px;

  .build-card {
    background-color: $d2r-bg-darker;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;

    .build-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .build-title {
        font-size: 16px;
        color: $d2r-gold;
        font-weight: bold;
      }
    }

    .build-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .build-author,
      .build-date {
        font-size: 12px;
        color: $d2r-text-muted;
      }
    }

    .build-stats {
      display: flex;

      .stat-item {
        display: flex;
        align-items: center;
        margin-right: 15px;

        .stat-text {
          font-size: 12px;
          color: $d2r-text-muted;
          margin-left: 4px;
        }
      }
    }
  }
}

// 底部信息
.footer {
  text-align: center;
  padding: 20px 0;

  .footer-text {
    font-size: 12px;
    color: $d2r-text-muted;
    display: block;
    margin-bottom: 5px;
  }
}

// 品质文本颜色
.text-normal {
  color: $quality-normal;
}

.text-magic {
  color: $quality-magic;
}

.text-rare {
  color: $quality-rare;
}

.text-set {
  color: $quality-set;
}

.text-unique {
  color: $quality-unique;
}

.text-crafted {
  color: $quality-crafted;
}
</style>